<template>
  <div class="body-tl">
    <HeaDer></HeaDer>
    <div class="top-tl">
      <div class="row-tl">
        <div class="left-tl">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/hp">首页</el-breadcrumb-item>
            <el-breadcrumb-item>关于我们</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="nav">
        <a href="#about"  @click.prevent="setActive('about')" :class="{ active: activeSection === 'about' }">关于我们</a>
        <a href="#join" @click.prevent="setActive('join')" :class="{ active: activeSection === 'join' }">加入我们</a>
        <a href="#contact" @click.prevent="setActive('contact')" :class="{ active: activeSection === 'contact' }">联系我们</a>
      </div>
      <div class="content" v-show="activeSection === 'about'">
        <section>
          <h1>我们是谁</h1>
          <p class="htext">WHO WE ARE</p>
          <p style="color:#757575; line-height: 28px; margin-bottom: 10px; text-indent: 2em;">
            湖南省环通企业管理咨询有限公司严格按照国家行政许可制度，经湖南省湘潭市工商管理局批准注册成立，是一家专业从事现代企业管理研究和各类国际标准认证咨询的咨询机构。
          </p>
          <p style="color:#757575; line-height: 28px;text-indent: 2em;">
            湖南环通公司最早于2007年在深圳创办，是认证咨询行业较早的机构之一。为适应中西部崛起潮流，2015年3月于湖南湘潭成立环通企业管理咨询有限公司。2016年再次打入华南市场，于深圳设立湖南环通公司深圳办事处，专注从事认证咨询行业。
          </p>
        </section>
        <section class="boss-div">
          <h1 style="text-align: center;">总经理致辞</h1>
          <p class="htext">GENERAL MANAGER SPEECH</p>
          <div class="founder">
            <img src="../../assets/images/img_01.png" alt="创始人肖像">
            <div>
              <p style="color:#E53333;font-size:16px;">您是我们的新客户</p>
              <p style="color:#E53333;font-size:16px;">感谢您购买我们的服务</p>
              <p style="color:#E53333;font-size:16px;">感谢您的支持与惠顾</p>
              <p style="color:#757575;">
                宁可世界花花看，不可心田草草耕。我们本着真心，本心、诚心通过评估诊断、培训指导、实施策划、文件编制、运行实操、评测考核、审核指导、持续改善八大专业辅导方式、每月公益讲座、定期管理技能课堂培训、公众号专栏、活动组织等形式，为所有的客户服务，并希望实现以下四个目标：
              </p>
              <ul style="color:#757575; padding-top:20px;">
                <li>1．帮助他人</li>
                <li>2．建立长期关系</li>
                <li>3．享受乐趣</li>
                <li>4. 专业领域不断精进</li>
              </ul>
            </div>
          </div>
        </section>
        <section>
          <h1 style="text-align: center;">业务范围</h1>
          <p class="htext">BUSINESS SCOPE</p>
          <div class="mission-vision-values">
            <div>
              <img src="../../assets/images/img_ab_jz.png" alt="认证咨询">
              <h3 style="color: #212121; font-weight: normal;">认证咨询</h3>
              <p>服务项目—管理体系认证咨询、普标、行标、产品认证。</p>
            </div>
            <div>
              <img src="../../assets/images/img_ab_sb.png" alt="管理咨询">
              <h3 style="color: #212121;font-weight: normal;">管理咨询</h3>
              <p>体系搭架构，薪酬保效果，精益提效率，培训推执行，IT固流程</p>
            </div>
            <div>
              <img src="../../assets/images/img_ab_yj.png" alt="管理培训">
              <h3 style=" color: #212121;font-weight: normal;">管理培训</h3>
              <p>以公开课堂、企业内训、管理沙龙等多种形式围绕</p>
            </div>
          </div>
        </section>
      </div>
      <div class="content" v-show="activeSection === 'join'">
        <section class="join-us">
          <h1>公司优势</h1>
          <p>COMPANY ADVANTAGES</p>
        </section>
        <section class="growth-stage">
          <!-- <h2>公司优势</h2>
          <p>Company advantages</p> -->
          <div class="stage">
            <img src="../../assets/images/img_02.png" alt="策划方案原创">
            <div class="stage-com">
              <h3>策划方案原创</h3>
              <p> 管理咨询中好的方案至关重要!每一个方案都需要结合企业的实际情况量身定制,目标过高或过低都难达到真正嵌合的效果，
                环通咨询每一个方案都是独一无二的，是公司专业团队的原创方案，确保落地，确保有效！
              </p>
            </div>

          </div>
          <div class="stage">
            <div class="stage-com2">
              <h3>OPPM管理依托</h3>
              <p>专业的产品需要专业管理方能发挥最大的效益，环通每一个咨询项目的完美推行，都严格实际工作施OPPM项目管理模式，确保人人责任，
                问题早发现，项目实施有保障！
              </p>
            </div>
            <img src="../../assets/images/img_03.png" alt="OPPM管理依托">
          </div>
          <div class="stage">
            <img src="../../assets/images/img_04.png" alt="师资国际注册">
            <div class="stage-com">
              <h3>师资国际注册</h3>
              <p>好的老师是项目专业技术的保障，环通每一个专业老师均是国家注册、国际注册专业资质老师，每一位环通咨询的客户都能享受到超值的
                高水平的的专业指导和科学方案报价。
              </p>
            </div>
          </div>
          <div class="stage">
            <div class="stage-com2">
              <h3>尖端机构验证</h3>
              <p>环通咨询先后在长沙、湘潭、株洲、等地合作客户100多家，均取得国内排名前10，国际排名前5的认证机构审核验证一次通过，是一家
                值得信赖的咨询机构
              </p>
            </div>
            <img src="../../assets/images/img_05.png" alt="尖端机构验证">
          </div>
          <div class="stage">
            <img src="../../assets/images/img_06.png" alt="权威官方认可">
            <div class="stage-com">
              <h3>权威官方认可</h3>
              <p>湖南省环通企业管理咨询有限公司是湖南省中小企业服务平台的服务机构，国家工信部两化融合管理体系咨询服务机构，同时也是湘
                潭市汽车协会理事单位；公司除主业务之外，也不定时举办各种公益管理讲座及专业问答沙龙的活动！密切受到相关方的关注和认可！
              </p>
            </div>
          </div>
        </section>
      </div>
      <div class="content" v-show="activeSection === 'contact'">
        <section class="contact-info">
          <div class="item">
            <img src="../../assets/images/ic_cu_02.png" alt="Email" width="72" height="72">
            <span class="float-left">
            <p style="color: #757575;">电话</p>
            <p class="hei-t">0731-55575337</p>
            <p class="hei-t">0731-58533166</p>
            <p class="hei-t">+86-13875274488</p>
          </span>
          </div>
          <div class="item">
            <img src="../../assets/images/ic_cu_01.png" alt="Enterprise" width="72" height="72">
            <span class="float-left">
            <p style="color: #757575;">邮箱</p>
            <p class="hei-t">3241391324@qq.com</p>
          </span>
          </div>
          <div class="item">
            <img src="../../assets/images/ic_cu_03.png" alt="Location" width="72" height="72">
            <span class="float-left">
            <p style="color: #757575;">地址</p>
            <p class="hei-t">湖南省湘潭市高新区晓塘路9号创新大厦1102室</p>
          </span>
          </div>
        </section>
        <section class="map">
          <img :src="require('../../assets/images/map-image.jpg')" alt="Map">
        </section>
      </div>
    </div>
    <FooTer></FooTer>
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { listReleaseManagement } from "@/api/release/release";
export default {
  data() {
    return {
      isLoaded: false,
      total: 0,
      total1: 0,
      total2: 0,
      activeName: "政策法规",
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        policyThemes: null,
        sendType: null
      },
      activeSection: 'about', // 默认显示“关于我们”选项卡
      breadcrumb: [
        {
          name: "首页",
          path: "{ path: '/' }"
        },
        {
          name: "动态列表",
          path: ""
        }
      ],
      input_top_right: "",
      tabs_pane1: [],
      tabs_pane2: [],
      tabs_pane3: [],
      currentPage: 1,
      pageSizes: [4, 8, 12, 16],
      PageSize: 4,

    }
  },
  methods: {
    setActive(section) {
      this.activeSection = section;
    }
  },
  components: {
    HeaDer,
    FooTer
  },
  created() {
  },

}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

.body-tl {
  height: 100%;
  width: 100%;
  /* font: 14rem arial; */
  font-size: 14rem;
  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
  color: #676767;
}

.top-tl {
  width: 100%;
  height: 64rem;
  background-color: #f8f9fb;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}
.nav {
  /* width: 200px;
  padding: 20px;
  border-right: 1px solid #ccc; */
  height: 100%;
  width: 171px;
  float: left;
}

.nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.nav a.active {
  color: #ff6600;
}

.content {
  flex: 1;
  border-left: 1px solid #E0E0E0;
  margin-bottom: 60px;
  margin-left: 170px;
  width: 1100px;
  padding-left: 120px
}

.content h1 {
  text-align: center;
  font-size: 24px;
  color: #212121;
}

.content p {
  //text-align: justify;
}
.founder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.founder img {
  width: 311px;
  height: auto;
  margin-right: 45px;
}
.container {
  width: 1200px;
  min-width: 1250px;
  margin: 0 auto;
  margin-top: 60px;
  min-height: 900px;
}
.mission-vision-values {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}

.mission-vision-values div {
  text-align: center;
  padding: 20px;
}

.mission-vision-values img {
  width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.mission-vision-values p {
  color: #757575;
  text-align: center;
  padding-top: 10px;
  font-size: 14px;
}
.mission-vision-values h3{font-size: 14px;}


.boss-div {
  margin: 60px 0;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  line-height: 32px;
}

.boss-div p {}

/* 加入我们 */
.join-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.join-us img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.join-us .content {
  text-align: center;
}

.join-us .content p {
  margin-bottom: 10px;
}

.join-us .content a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f44336;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.join-us .content a:hover {
  background-color: #e0392e;
}

.growth-stage {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-bottom: 40px;
}

.growth-stage p {
  text-align: center;
}

.growth-stage .stage {
  text-align: center;
  padding: 20px;
  display: flex;
  align-items: center;
}

.stage .stage-com {
  text-align: left;
  margin-left: 94px;
  font-size: 14px;
  color: rgba(117, 117, 117, 1);
  line-height: 28px;
  width: 732px;
}

.stage .stage-com2 {
  text-align: left;
  margin-right: 94px;
  font-size: 14px;
  color: rgba(117, 117, 117, 1);
  line-height: 28px;
  width: 732px;
}

.growth-stage .stage img {
  width: 300px;
  height: auto;
}

.growth-stage .stage p {
  text-align: left;
}
/* 联系我们 */
.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.contact-info .item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-info .item .float-left {
  float: left;
  margin-top: 10px;
  margin-left: 33px;
}

.contact-info .item .float-left .hei-t {
  font-size: 18px;
  color: #212121;
  line-height: 28px;
  margin-top: 10px;
}

.contact-info .item img {
  height: auto;
  margin-right: 10px;
}

.contact-info .item p {
  margin-bottom: 0;
}

.map {
  width: 100%;
  height: 400px;
  margin-bottom: 40px;
}
.htext{
  font-size: 14px;
  margin-top: 15px;
  color: #212121;
  text-align: center;
  padding-bottom: 40px;
}

.row-tl {
  width: 1532rem;
  margin: 0 auto;
}

.top-tl>.row-tl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.top-tl>.row-tl>.left-tl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

.top-tl>.row-tl>.left-tl>span {
  font-size: 14px;
}

.top-tl>.row-tl>.right-tl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46rem;
  width: 360rem;
}
.stage h3{color:rgba(0,0,0,1); padding-bottom: 15px; font-weight: normal;}

.icon1-tl {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/tl-icon_03.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

.icon2-tl {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/tl-icon_05.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

.icon3-tl {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/tl-icon_07.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

.main-tl {
  padding-top: 36rem;
  background: url(../../assets/images/tl-bg_05.png) no-repeat;
  background-position: right top;
  background-size: 445rem 413rem;
}

::v-deep .main-tl .el-tabs__nav-wrap::after {
  display: none;
}

::v-deep .main-tl .el-tabs__item {
  height: 108rem;
}

::v-deep .main-tl .el-tabs__item>span {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 24rem;
  color: #373737;
  background-color: #e7fbee;
  border-radius: 3rem;
  border: 4rem solid white;
  padding: 20rem 55rem;
}

::v-deep .main-tl .el-tabs__item.is-active>span {
  border: 4rem solid #49cd6c;
  font-weight: bold;
}

::v-deep .main-tl .el-tabs__item>span>i {
  margin-right: 14rem;
}

::v-deep .main-tl .el-tabs__active-bar {
  display: none;
}

.tabs-tl {
  width: 100%;
}

.tabs-tl>li {
  width: 100%;
  height: 214rem;
  border-bottom: solid 1px #dcdedd;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: white;
}

.tabs-tl>li>.content-tl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 92rem;
}

.tabs-tl>li>.content-tl>.left-tl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: solid 1px #dcdedd;
  padding-right: 34rem;
  padding-left: 54rem;
  font-family: arial;
  height: 100%;
}

.tabs-tl>li>.content-tl>.left-tl>dt {
  font-size: 38rem;
  padding-bottom: 2rem;
  color: #219b48;
}

.tabs-tl>li>.content-tl>.right-tl {
  padding-left: 28rem;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 100rem;
  width: 1110rem;
}

.tabs-tl>li>.content-tl>.right-tl>dt {
  font-size: 24rem;
  font-weight: bold;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.tabs-tl>li>.content-tl>.right-tl>dd {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.tabs-tl>li>.content-tl>.right-tl>dd:nth-child(2) {
  width: 980rem;
}

.tabs-tl>li>.content-tl>.right-tl>dd:last-child {
  background: url(../../assets/images/tl-fangzi_06.png) no-repeat scroll;
  background-position: left;
  background-size: 14rem 14rem;
  padding-left: 23rem;
}

.tabs-tl>li>.btn-tl {
  width: 120rem;
  height: 36rem;
  border-radius: 18rem;
  border: solid 1px #219b48;
  color: #219b48;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: white;
  white-space: nowrap;
}

.tabs-tl>li>.btn-tl>i {
  background: url(../../assets/images/tl-icon-jiantou_03.png) no-repeat scroll;
  background-size: 100% 100%;
  width: 18rem;
  height: 11rem;
  margin-left: 5rem;
}

.tabs-tl>li:hover {
  background: url(../../assets/images/tl-bg_03.png) no-repeat scroll;
  background-size: 100% 100%;
  color: white !important;
  border-bottom: none;
  /* box-shadow: 5rem 0 10rem rgba(33, 155, 72, .5); */
}

.tabs-tl>li:hover .dt-left-tl {
  color: white !important;
}

.tabs-tl>li:hover .dd-rlast-tl {
  background: url(../../assets/images/tl-fangzi_03.png) no-repeat scroll !important;
  background-position: left;
  background-size: 14rem 14rem !important;
  padding-left: 23rem;
}

.pagination-tl {
  margin-top: 50rem;
  margin-bottom: 50rem;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #35a266;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #35a266;
}
</style>
